<template>
	<view class="scan-cont">
		<view class="scan-cont-title">扫码付款</view>
		<view class="scan-cont-codelist">
			<image class="scan-cont-codelist-code" v-for="(img,index) in codeList" :key="index" @tap="zoomIn(img.src)" :src="img.src" mode="widthFix"></image>
		</view>
		<view class="scan-cont-item flex f-a-center">
			<view class="scan-cont-item-text">实付金额：</view>
			<view class="scan-cont-item-price">￥{{sendData.draw_price}}</view>
		</view>
		<view class="scan-cont-item flex f-a-center">
			<view class="scan-cont-item-text">输入支付订单号：</view>
			<input type="text" placeholder="请输入支付订单号" class="scan-cont-item-input" v-model="sendData.pay_order_no" />
		</view>
		
		<view class="scan-cont-course">
			<view class="scan-cont-course-title">支付教程</view>
			<view class="scan-cont-course-item">1.点击二维码图片，弹出二维码后长按图片，提示框弹出后点击‘确定’</view>
			<view class="scan-cont-course-item">2.扫码支付完成后，请在‘输入支付订单号’的输入框内填写订单号即可提交</view>
		</view>
		
		<view class="scan-cont-btn" @tap="pushOrder()">提交</view>
		
		<uni-transition :mode-class="['fade']" :styles="maskClass" :show="transShow"/>
		<uni-transition :duration="500" :mode-class="modeClass" :styles="transfromClass" :show="transShow">
			<view style="position: relative;">
				<image :src="showImg" @longtap="longtap" mode="widthFix"></image>
				<image class="scan-cont-close" @tap="close" src="../../static/icons/jewel/sign_close.png"></image>
			</view>
		</uni-transition>
		
		
	</view>
</template>

<script>
	import jewel from '@/common/common_zb.js';
	export default {
		data() {
			return {
				goodsList:[],
				goodsInfo:{},
				pay_order_no:'',
				totalMoney:0,
				sendData:{
					goods_id:'',
					pay_way:'duolabao',
					choose_item_id:0,
					draw_price:0,
					pay_order_no:''
				},
				modeClass:['fade'],
				transShow:false,
				transfromClass: {
					'position': 'fixed',
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					/* #ifndef APP-NVUE */
					'display': 'flex',
					/* #endif */
					'justify-content': 'center',
					'align-items': 'center',
					'z-index':11
				},
				maskClass: {
					'position': 'fixed',
					'z-index':9,
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					'background-color': 'rgba(0, 0, 0, 0.4)'
				},
				showImg:''
			}
		},
		methods: {
			pushOrder(){
				let that = this
				if(!that.sendData.pay_order_no){
					jewel.showToast('请输入支付订单号')
					return false
				}
				jewel.post('Lottery/draw_buy',that.sendData,true,function(res){
					if(res.data.code == 0){
						uni.redirectTo({
							url:'/pages/user/lottery_buylist'
						})
					}
				});
			},
			longtap(){
				let that = this
				uni.showModal({
					content:'是否保存图片',
					confirmColor:'#D71511',
					success(res) {
						if (res.confirm) {
							uni.showLoading({
								title:'保存中...'
							})
							uni.downloadFile({
								url: that.showImg,
								success: (res) =>{
									if (res.statusCode === 200){
										uni.saveImageToPhotosAlbum({
											filePath: res.tempFilePath,
											success: function() {
												uni.hideLoading()
												uni.showToast({
													title: "保存成功",
													icon: "none"
												});
											},
											fail: function(res) {
												uni.hideLoading()
												uni.showToast({
													title: "保存失败，请稍后重试",
													icon: "none"
												});
											}
										});
									}
									
								},
								fail: (error) =>{
									uni.hideLoading()
									console.log(JSON.stringify(error))
								}
							})
						}
					},
				})
			},
			zoomIn(src){
				this.showImg = src
				this.transShow = true
				console.log(this.showImg)
			},
			close(){
				this.transShow = false
			}
		},
		onLoad(loadData) {
			this.sendData.draw_price = loadData.totalMoney
			this.sendData.goods_id = loadData.goods_id
			this.codeList = [
				{src:'https://jewel.gdhenglang.com/uploads/duolabao1.jpg'},
				{src:'https://jewel.gdhenglang.com/uploads/duolabao2.jpg'}
			]
		}
	}
</script>

<style lang="scss" scoped>
	.flex{
		display: flex;
	}
	.f-a-center{
		align-items: center;
	}
	.f-j-center{
		justify-content: center;
	}
	.scan-cont{
		&-title{
			color: #d71511;
			font-size: 57rpx;
			text-align: center;
			line-height: 100rpx;
		}
		&-codelist{
			display: flex;
			justify-content: center;
			&-code{
				width: 322rpx;
				height: 400rpx;
				margin: 0 10rpx{
					bottom: 55rpx;
				};
			}
		}
		&-item{
			padding: 0 30rpx;
			justify-content: space-between;
			height: 60rpx;
			&-text{
				color: #323232;
				font-size: 30rpx;
			}
			&-price{
				color: #ee4242;
			}
			&-input{
				border:1px solid #989898;
				width: 440rpx;
			}
		}
		&-btn{
			background-color: #d71511;
			height: 98rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 40rpx;
			line-height: 98rpx;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
		}
		&-close{
			position: absolute;
			bottom: -100rpx;
			left: 50%;
			width: 86rpx;
			height: 86rpx;
			margin-left: -43rpx;
		}
		&-course{
			&-title{
				font-size: 32rpx;
				font-weight: bold;
				padding-bottom: 20rpx;
			}
			&-item{
				font-size: 28rpx;
				line-height: 40rpx;
				margin-bottom: 10rpx;
			}
			padding: 0 30rpx;
			margin-top: 20rpx;
		}
	}
</style>
